function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var image = document.getElementById('testimage');
  ctx.drawImage(image, 20, 10);

  var imageData;
  try {
    try {
      imageData = ctx.getImageData(20, 120, image.width, image.height);
    } catch(e) {
      netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
      imageData = ctx.getImageData(20, 120, image.width, image.height);
    }
    //alert(imageData);
    if (imageData) {
      //alert("grayImage");
      var grayimage = grayImage(imageData);

      ctx.putImageData(grayimage, 20, 40);
    }
  } catch(e) {
    throw new Error("unable to access image data: " + e);
    alert("get data failed");
  }

  /*
    try {
        var imageData = ctx.getImageData(20, 20, img.width, img.height);
        imageData = grayImage(imageData);
        ctx.putImageData(imageData, 60, 20);
    } catch(e) {
        alert(e);
    }*/

  ctx.restore();
}

//gray image data
function grayImage(imageData) {
  /*var length = imageData.data.length / 4;
    for (var i = 0; i < length; i++) {
        var r = imageData.data[i * 4 + 0];
        var g = imageData.data[i * 4 + 1];
        var b = imageData.data[i * 4 + 2];
        imageData.data[i * 4 + 0] = 0.3 * r;
        imageData.data[i * 4 + 1] = 0.59 * g;
        imageData.data[i * 4 + 2] = 0.11 * b;
    }*/
  for (j = 0; j < imageData.height; i++) {
    for (i = 0; i < imageData.width; j++) {
      var index = (i * 4) * imageData.width + (j * 4);
      var red = imageData.data[index];
      var green = imageData.data[index + 1];
      var blue = imageData.data[index + 2];
      var alpha = imageData.data[index + 3];
      var average = (red + green + blue) / 3;
      imageData.data[index] = average;
      imageData.data[index + 1] = average;
      imageData.data[index + 2] = average;
      imageData.data[index + 3] = alpha;
    }
  }

  return imageData;
}

//binarize image: image data to 0 or 255
function binarize(imageData) {
  var tv = computeThresholdValue(imageData);
  var length = imageData.data.length / 4;
  for (var i = 0; i < length; i++) {
    var r = imageData[i * 4 + 0];
    if (r >= tv) {
      imageData.data[i * 4 + 0] = 0xff;
      imageData.data[i * 4 + 1] = 0xff;
      imageData.data[i * 4 + 2] = 0xff;
    } else {
      imageData.data[i * 4 + 0] = 0;
      imageData.data[i * 4 + 1] = 0;
      imageData.data[i * 4 + 2] = 0;
    }
  }
  return imageData;

}

//compute thresh old value
function computeThresholdValue(imageData) {
  var k;
  var i;
  var csum;
  var thresholdValue = 1;
  var ihist;
  for (i = 0; i < 0x100; i++) {
    ihist[i] = 0;
  }
  var gmin = 0xff;
  var gmax = 0;

  var length = imageData.data.length / 4;
  for (var i = 0; i < length; i++) {
    var cn = imageData.data[i * 4 + 0];
    ihist[cn]++;
    if (cn > gmax) {
      gmax = cn;
    }
    if (cn < gmin) {
      gmin = cn;
    }
  }

  var sum = csum = 0.0;
  var n = 0;
  for (k = 0; k <= 0xff; k++) {
    sum += k * ihist[k];
    n += ihist[k];
  }
  if (n == 0) {
    return 60;
  }
  var fmax = -1.0;
  var n1 = 0;
  for (k = 0; k < 0xff; k++) {
    n1 += ihist[k];
    if (n1 != 0) {
      var n2 = n - n1;
      if (n2 == 0) {
        return thresholdValue;
      }
      csum += k * ihist[k];
      var m1 = csum / n1;
      var m2 = (sum - csum) / n2;
      var sb = ((n1 * n2) * (m1 - m2)) * (m1 - m2);
      if (sb > fmax) {
        fmax = sb;
        thresholdValue = k;
      }
    }
  }
  return thresholdValue;
}

function prepareMouseOverImage(image, originalURL) {
  image.mouseOverImage = originalURL;
  image.onload = function() {
    return true;
  };
  image.normalImage = grayscale(image, false);

  image.onmouseover = function() {
    //alert("a");
    this.src = this.mouseOverImage;
  }

  image.onmouseout = function() {
    //	alert(this.normalImage.src);
    this.src = this.normalImage;
  }
  image.src = image.normalImage;
}

function grayscale(image, bPlaceImage) {
  alert('aaa');
  var myCanvas = document.createElement('canvas');
  var myCanvasContext = myCanvas.getContext('2d');

  var imgWidth = image.width;
  var imgHeight = image.height;
  // You'll get some string error if you fail to specify the dimensions
  myCanvas.width = imgWidth;
  myCanvas.height = imgHeight;
  //  alert(imgWidth);
  myCanvasContext.drawImage(image, 0, 0);
  // this function cannot be called if the image is not rom the same domain.  You'll get security error
  var imageData = myCanvasContext.getImageData(0, 0, imgWidth, imgHeight);
  var i, j;
  for (i = 0; i < imageData.height; i++) {
    for (j = 0; j < imageData.width; j++) {
      var index = (i * 4) * imageData.width + (j * 4);
      var red = imageData.data[index];
      var green = imageData.data[index + 1];
      var blue = imageData.data[index + 2];
      var alpha = imageData.data[index + 3];
      var average = (red + green + blue) / 3;
      if (average < 139) average = 255;
      else average = 0;
      imageData.data[index] = average;
      imageData.data[index + 1] = average;
      imageData.data[index + 2] = average;
      imageData.data[index + 3] = alpha;
    }
  }

  myCanvasContext.putImageData(imageData, 0, 0, 0, 0, imageData.width, imageData.height);

  // myCanvasContext.drawIMage(imageData,0,0);//,0,0, imageData.width, imageData.height);  

  if (bPlaceImage) {
    var myDiv = document.createElement("div");
    myDiv.appendChild(myCanvas);
    image.parentNode.appendChild(myCanvas); //, image);
  }
  return myCanvas.toDataURL();
}